<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <Head/>
        <Menu/>
      </el-header>
      <el-container>
        <el-aside width="200px" style="margin-top: 100px">
          <div class="left">
            <div class="info concise">
              <img
                  :src=communityPyq.avatar
                  class="avatar"
              />
              <p style="margin-left: 50px">Welcome{{communityPyq.nickName}}}</p>
            </div>

            <div>
              <!--              <p class="text-center demonstration">card vertical layout</p>-->
              <el-carousel
                  height="400px"
                  direction="vertical"
                  type="card"
                  :autoplay="false"
              >
                <el-carousel-item v-for="item in reastaurantPic" :key="item">
                  <h3 text="2xl" justify="center">{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </el-aside>
        <el-container>
          <el-main>
            <div style="margin-top:50px">

              <el-upload
                  class="avatar-uploader"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
              >
                <img v-if="communityPyq.imageUrl" :src="communityPyq.imageUrl" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus/>
                </el-icon>
              </el-upload>

              <el-col :span="26" style="color: brown">
                请上传大小不要超过2MB的JPG图片
              </el-col>
              <div class="input">
                <el-input
                    v-model="communityPyq.content"
                    :rows="2"
                    type="content"
                    placeholder="分享今日……"
                    @input="checkInputLength"
                />
              </div>
              <div v-if="inputLengthExceeded" class="warning">警告：输入已超过200字！</div>
              <el-form-item>
                <el-button type="primary" @click="addPyq">发布</el-button>
                <el-button type="danger" @click="resetForm">重置</el-button>
              </el-form-item>
              <el-divider>
                <el-icon><star-filled /></el-icon>
              </el-divider>
            </div>
            <div style="margin-top: 10px">
              <div class="container" >
                <el-row>
                  <el-col :span="12" v-for="item in receivePyq " :key="item.id">
                    <CommunityItem :avatar="item.avatar" :nickname="item.nickname" :content="item.content" :imageUrl="item.imageUrl" :createTime="item.createTime" />
                  </el-col>
                </el-row>
                <el-pagination background layout="prev, pager, next" :total="total"
                               :@current-change="handleCurrentChange"
                               :current-page.sync="currentPage"
                               :page-size="pageSize"/>
              </div>
            </div>
            <div>
              <h2>Received Pyq</h2>
              <div v-for="item in receivePyq" :key="item.id">
                <div>
                  <img :src="item.avatar" alt="Avatar">
                </div>
                <div>
                  <h3>{{ item.nickName }}</h3>
                  <p>{{ item.content }}</p>
                  <p>Created at: {{ item.createTime }}</p>
                </div>
              </div>
            </div>
            <div>
              <p >
                —— 我可是有底线的！( •̥́ ˍ •̀ू ) ——
              </p>
            </div>

          </el-main>

        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {defineComponent} from "vue";
import Head from "@/components/Head.vue";
import Menu from "@/components/Menu.vue";
import Footer from "@/components/Footer.vue";
import {ElMessage} from 'element-plus'
import {Plus} from '@element-plus/icons-vue'
import {community} from "@/web-api/community_user/community.js";
import {getLocalStorage, KEY_AVATAR, KEY_NICKNAME, KEY_USER_ID} from "@/utils/localStorge.js";
import {baseStaticRecourseAPI, NOW_ENVIRONMENT} from "@/baseAPIConfig.js";
import CommunityItem from '@/view/main/CommunityItem.vue'
import {communityReceive} from "@/web-api/community_user/community.js";

onMounted(() => {
  getPyq();
})
let communityPyq = reactive({
  imageUrl:'',
  // nickName:getLocalStorage(KEY_NICKNAME),
  // avatar: baseStaticRecourseAPI[NOW_ENVIRONMENT] +getLocalStorage(KEY_AVATAR),
  content:'',
  userId:getLocalStorage(KEY_USER_ID)
  // sentTime:''
});
let receivePyq = reactive({
  imageUrl:'',
  nickName:'',
  avatar: '',
  content:'',
  createTime:''
});
receivePyq:[];
reastaurantPic:[];
  // '@/assets/1.jpg',
  // '@/assets/2.jpg','@/assets/3.jpg','@/assets/4.jpg'];
currentPage: 1;
total: '';
pageSize: 10;
inputLengthExceeded: false;
let resetForm = () => {
  communityPyq.imageUrl='';
  communityPyq.content='';
  inputLengthExceeded: false;
};
let watch=(communityPyq)=>{
  if (this.communityPyq.content.length > 200) {
    this.inputLengthExceeded = true;
  } else {
    this.inputLengthExceeded = false;
  }}
let  addPyq=()=>{
  // communityPyq.sentTime = new Date().toISOString();
  community(communityPyq).then(response=> {
    if (response.code === 200) {
      ElMessage.success("发布成功!");
      getPyq();
    } else {
      ElMessage.error("发布失败!");
    }
  });

  let handleAvatarSuccess = (
      response,
      uploadFile
  ) => {
    communityPyq.imageUrl = URL.createObjectURL(uploadFile.raw)
  }

  let beforeAvatarUpload = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
      ElMessage.error('Avatar picture must be JPG format!')
      return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
      ElMessage.error('Avatar picture size can not exceed 2MB!')
      return false
    }
    return true
  }}
let handleCurrentChange=(currentPage) =>{
  this.currentPage = currentPage;
  this.getPyq();
};
let queryPyq=()=>{
  this.currentPage = 1;
  this.getPyq();
};
let getPyq=()=>{
  const nickName = this.receivePyq.nickName;
  const avatar = this.receivePyq.avatar;
  const  content= this.receivePyq.content;
  const createTime = this.receivePyq.createTime;
  const  imageUrl= this.receivePyq.imageUrl;
  communityReceive({
    pageNum: this.currentPage,
    pageSize: 10,
    nickName: nickName,
    avatar: avatar,
    content: content,
    createTime: createTime,
    imageUrl: imageUrl,
  }).then(response=>{
    if (response.code === 200) {
      this.$message.success('获取列成功');
      this.receivePyq= response.rows;
      this.total = response.total;
    } else {
      this.$message.error(response.message);
    }
  })
      .catch(error => {
        this.$message.error('获取列表失败');
        console.log(error);
      });
};

</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.left {
  width: 300px;
  min-width: 24px;
  flex-shrink: 0;
  margin-right: 20px;
  .avatar {
    padding: 0 10px;
    width: 80px;
    height: 80px;
    margin-left: 50px;
    padding: 0;
    color: #3da8f5;
    text-align: center;
    cursor: pointer;
    background: #fff;
    line-height: 44px;
    border: 2px solid #dcf4ff;
    box-sizing: border-box;
    border-radius: 50%;
    color: #c4c4c4;
    transition: all .3s
  }
  .warning {
    color: red;
  }
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
